<%@page pageEncoding="UTF-8" isELIgnored="false" session="true"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>なんでもランキング!!</title>
<script type="text/javascript">

//はじめのselect要素の値
var strsel1  = new Array("ペットにしたい動物はどれですか？","好きな食べ物はどれですか？","好きなゲームはどれですか？");

//1つ目の質問に連動する値
var strsel21 = new Array("犬","猫","鳥");

//2つ目の質問に連動する値
var strsel22 = new Array("カレー","ラーメン","お寿司");

//3つ目の質問に連動する値
var strsel23 = new Array("ドラクエ","FF","ポケモン");

function CreateList()//body要素のonLoad属性でコールされる
{
    Create(document.getElementById('lstsel1'), strsel1);
    Create(document.getElementById('selection'), strsel21);
}
function CreateList2(myFORM)//strsel1の配列数が増えた分、下３行を対応（カスタマイズ）させる
{
    if(myFORM.lstsel1.options.selectedIndex == 0){ //1つ目の質問が選択されたか
        Create(document.getElementById('selection'), strsel21);
    }
    else if(myFORM.lstsel1.options.selectedIndex == 1){//2つ目の質問が選択されたか
        Create(document.getElementById('selection'), strsel22);
    }   // 以下の3行をstrsel1の配列の数分用意する。
    else if(myFORM.lstsel1.options.selectedIndex == 2){//3つ目の質問が選択されたか
        Create(document.getElementById('selection'), strsel23);
    }
}
function Create(objList, objArray)
    //objListは、select要素のオブジェクト
    //objArrayは、select要素へ代入する値の配列
{
    var nMax = objArray.length;//select要素へ代入する値の配列数
    var nLoop = 0;
    for (nLoop = 0; nLoop < nMax; nLoop++){
        //option要素を作成
        oAdd = document.createElement('option');

        //option要素を親要素に追加する前にすでに子要素があるときはそれを削除
        if(objList.childNodes[nLoop]  != undefined)
            objList.removeChild(objList.childNodes[nLoop]);

        //option要素を親要素（select）へ追加
        objList.appendChild(oAdd);

        //option要素のvalue属性にインデックスの値を設定
        objList.childNodes[nLoop].setAttribute('value',objArray[nLoop]);

        //option要素の子要素にobjArray配列の値をテキストとして作成
        oAddx= document.createTextNode(objArray[nLoop]);

        //すでに子要素があるときはそれを削除
        if(objList.childNodes[nLoop].firstChild  != undefined)
            objList.childNodes[nLoop].removeChild(objList.childNodes[nLoop].firstChild);

        //作成したテキストを親要素（option）へ追加
        objList.childNodes[nLoop].appendChild(oAddx);
    }
    //連動する方のselect要素の個数を設定する
    objList.length=nLoop;
}
//理由の未入力チェック
function check () {
	var comment = document.Form.comment.value;
	if ( comment == "" ) {
		alert ( "理由を入力して下さい。" );
		document.Form.comment.focus();
		return false;
		}

		return true;
		}
</script>
</head>

<body onLoad="CreateList()"bgcolor="${f:h(bgcolor)}">

<!-- ロゴ -->
<center>
<table border="0">
<tr><td align=center>
<font size="1" face="ＭＳ 明朝" color="#bfbfbf">
<B><I>な</FONT>
<font size="0.8" face="ＭＳ 明朝" color="#7f7f7f">
<sup>ん</sup></FONT>
<font size="0.6" face="ＭＳ 明朝" color="#4a4a4a">
<sup>で</sup></sup></FONT>
<font size="0.5" face="ＭＳ 明朝" color="#353535">
<sup>も</sup></FONT>
<font size="0.6" face="ＭＳ 明朝" color="#000000">
<sup>★</sup></FONT>
<font size="0.5" face="ＭＳ 明朝" color="#353535">
<sup>ラ</sup></FONT>
<font size="0.6" face="ＭＳ 明朝" color="#4a4a4a">
<sup>ン</sup></FONT>
<font size="0.7" face="ＭＳ 明朝" color="#7f7f7f">
<sup>キ</sup></FONT>
<font size="0.7" face="ＭＳ 明朝" color="#bfbfbf">
<sup>ン</sup></I></FONT>
<font size="1" face="ＭＳ 明朝" color="#7f7f7f">
グ</B></FONT>
	</td></tr>
	<tr><td>
<Table border="0" bgcolor="#000000" cellpadding="15" Cellspacing="0" width="25" height="1"
style="border:thick ridge #c9c9c9;font-family:ＭＳ ゴシック;font-size:10px;color:#ffffff;"><Tr><Td align="center">
<marquee width="120" scrollamount="5" truespeed>
さまざまなジャンルを、みんなで人気投票ができるサイトです。
</marquee></Td></Tr></Table>
</td></tr></table>

<hr style="border:dotted;color:#ff80c0;">
<span style="width:370;height:50;font-size:20pt;font-family:富士ポップ;color:#ff00ff;filter:shadow(color=pink);">
質問を選び、その回答と理由を教えてください</span>

<br>
<br>
<table border="0">

	<tr><td>
<p>質問</p>
	</td></tr>
	<tr><td>
	<form method="post" action="vote" name="Form" onSubmit="return check();">

<select size="1" id="lstsel1" name="lstsel1" onChange="CreateList2(this.form)"></select>
</td></tr>
	<tr><td>
	<p>回答</p>
	</td></tr>
	<tr><td>
<select size="1" id="selection" name="selection" onChange="selectedout(this.form)"></select>
</td></tr>

<%--理由が未入力の時フォワードさせていたが、選択肢が変わってしまうため画面で対応
 		<font size="3" color="#ff0000">
 ${f:h(errors.comment)}
 </font> --%>
 	<tr><td>
 	<br>
 <p>理由</p>
 	</td></tr>
 		<tr><td>
		<textarea name="comment" rows="4" cols="35"></textarea>
		<table>
			<tr>
				<td></td>
				<td><input type="submit" value="投票"></td>
			</tr>
			</td></tr>
		</table>
	</form>
	</table>
	</center>
	<br><br><br>
	<form name= "form3" method= "post" action= "/kadai/login/">
<a href="${f:url('/kadai/resultVoting/')}">投票結果</a>
<input type="hidden" name="logout" value="ログアウトしました">
<a href="javascript:form3.submit()">ログアウト</a>
</form>

</body>
</html>